<template>
    <div class="hot max-width">
        <template v-for="item in data">
            <router-link :to="'/article/detail/'+ item.id">
                <div class="img" :style="{backgroundImage:'url(' +item.logo.fullUrl + ')'}"></div>
                <div>{{item.title}}</div>
            </router-link>
        </template>
    </div>
</template>

<script type="text/ecmascript-6">

    export default {
        props: {
            value: {
                type: Array, default: []
            }
        },
        data() {
            return {data: this.value};
        },
        watch: {
            value: {
                deep: true,
                handler(value) {
                    this.data = value;
                }
            }
        },
    }
</script>

<style scoped>
    .hot {
        display: flex;
        justify-content: space-between;
        margin: 3rem auto;
        flex-wrap: wrap;
        align-items: flex-start;
        position:relative;
    }

    .hot > *, .hot div {
        text-align: center;
    }

    .hot >*{
        margin-bottom:3rem;
    }

    .hot .img {
        display: block;
        width: 32rem;
        height: 32rem;
    }

    .hot .sign{
        position: absolute;
        top:10px;
        left:10px;
        z-index:99;
    }
</style>
